<template>
	<div class="base-content" ref="baseContent">
		<el-row :gutter="10">
			<el-col :span="12">
				<el-card>
					<template #header>
						<span>第一步：选择图片</span>
					</template>
					<el-upload ref="uploader" :class="{hide: fileList.length > 0 ? true : false}" :file-list="fileList"
						action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card"
						accept=".jpg,.jpeg,.png" :auto-upload="false" :limit="1" :on-change="handleChange"
						:on-remove="handleRemove">
						<el-icon>
							<plus />
						</el-icon>
						<template #file="{ file }">
							<div>
								<img class="el-upload-list__item-thumbnail" id="upldf-001" :src="file.url" alt=""
									@load="imgLoad" />
								<span class="el-upload-list__item-actions">
									<span class="el-upload-list__item-delete" @click="handleRemove(file)">
										<el-icon style="font-size: 1.3em;">
											<delete />
										</el-icon>
									</span>
								</span>
							</div>
						</template>
					</el-upload>
				</el-card>
			</el-col>
		</el-row>
		<el-affix :offset="80">
			<el-alert show-icon type="warning" :closable="false" v-if="fileList.length > 0">
				<template #title>
					点击下面画布内容可获取对应像素信息
				</template>
				<span v-if="curPoint.x != null">
					<span style="margin-right: 1em;">当前点击坐标({{curPoint.x}}, {{curPoint.y}})</span>
					<span class="color-temp" :style="{background: curPoint.rgbaColor}"></span>
					<span style="margin-left: 1em;">{{curPoint.rgbaColor}}</span>
					<span style="margin-left: 1em;">{{curPoint.hexColor}}</span>
				</span>
			</el-alert>
		</el-affix>
		<div class="canvas-container" :style="{'height':cheight+'px', 'width':cwidth+'px'}">
			<canvas ref="cvs" :width="cwidth" :height="cheight" @click="cvsClick"></canvas>
		</div>
		<el-popover v-model:visible="popVisble" placement="top" width="40%">
			<div>
				<p>操作</p>
				画布尺寸<el-slider v-model="imgsize" :max="maxsize" show-input @change="sliderChange"
					:disabled="fileList.length <= 0">
				</el-slider>
				<el-popover v-if="fileList.length <= 0" placement="top-start" title="Title" :width="200" trigger="hover"
					content="请先选择一张图片">
					<template #reference>
						<el-button>取反色</el-button>
					</template>
				</el-popover>
				<el-button v-else @click="reverse">取反色</el-button>
				<el-popover placement="top-start" title="Title" :width="200" trigger="hover" content="请先在图中选择一个点">
					<template #reference>
						<el-button>取色透明化</el-button>
					</template>
				</el-popover>
			</div>
			<template #reference>
				<el-button type="primary" :icon="Edit" @click="popVisble = true" size="medium" circle class="fixed-btn">
				</el-button>
			</template>
		</el-popover>
	</div>
</template>

<script setup>
	import {
		Plus,
		Delete
	} from '@element-plus/icons'
	import {
		Edit,
	} from '@element-plus/icons-vue'
	import {
		ref,
		reactive,
		nextTick,
		onMounted
	} from 'vue'

	// 图片blob
	let popVisble = ref(false),
		showPixel = ref(false),
		uploader = ref(),
		curPoint = reactive({
			x: null,
			y: null,
			rgbaColor: '',
			hexColor: ''
		}),
		// ref画布
		cvs = ref('cvs'),
		// ref容器
		baseContent = ref('baseContent'),
		// 画布宽度
		cwidth = ref(0),
		// 画布高度
		cheight = ref(0),
		// 图片实际渲染宽度
		imgsize = ref(500),
		// 最大宽度
		maxsize = ref(500),
		// 照片墙
		fileList = ref([])
	onMounted(() => {
		maxsize.value = baseContent.value.clientWidth
	})
	const handleRemove = (file, fl) => {
			fileList.value = []
			const context = cvs.value.getContext('2d')
			context.clearRect(0, 0, cwidth.value, cheight.value)
			curPoint.x = null
			curPoint.y = null
			curPoint.rgbaColor = ''
			curPoint.hexColor = ''
		},
		handleChange = (f, fl) => {
			fileList.value = fl
			if (f && f.raw && f.raw.type !== 'image/jpeg' && f.raw.type !== 'image/png') {
				fileList.value = []
				ElNotification({
					title: '提示',
					message: '只能上传JPG,JPEG,PNG格式的图片'
				})
			}
		},
		imgLoad = (e) => {
			resize(e.target)
		},
		cvsClick = (e) => {
			const x = e.offsetX
			const y = e.offsetY
			const context = cvs.value.getContext('2d')

			const imageData = context.getImageData(x, y, 1, 1);
			const pixel = imageData.data;
			let r = pixel[0];
			let g = pixel[1];
			let b = pixel[2];
			let a = pixel[3] / 255;
			a = Math.round(a * 100) / 100;
			let rHex = r.toString(16);
			r < 16 && (rHex = "0" + rHex);
			let gHex = g.toString(16);
			g < 16 && (gHex = "0" + gHex);
			let bHex = b.toString(16);
			b < 16 && (bHex = "0" + bHex);
			let rgbaColor = "rgba(" + r + "," + g + "," + b + "," + a + ")";
			let hexColor = "#" + rHex + gHex + bHex;
			curPoint.x = x
			curPoint.y = y
			curPoint.rgbaColor = rgbaColor
			curPoint.hexColor = hexColor
			showPixel.value = true


		},
		sliderChange = (e) => {
			const i = document.getElementById('upldf-001')
			resize(i)
		},
		resize = (i) => {
			const context = cvs.value.getContext('2d')
			const width = i.clientWidth,
				height = i.clientHeight
			if (width && height) {
				if (width > height) {
					cwidth.value = imgsize.value
					cheight.value = Math.floor(imgsize.value / width * height)
				} else {
					cheight.value = imgsize.value
					cwidth.value = Math.floor(imgsize.value / height * width)
				}
			} else {
				cwidth.value = imgsize.value
				cheight.value = imgsize.value
			}
			nextTick(() => {
				context.drawImage(i, 0, 0, cwidth.value, cheight.value)
			})
		},
		reverse = () => {}
</script>

<style>
	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
		background-color: #ffffff;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409eff;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		text-align: center;
	}

	.avatar-uploader-icon svg {
		margin-top: 74px;
		/* (178px - 28px) / 2 - 1px */
	}

	.avatar {
		width: 178px;
		height: 178px;
		display: block;
	}

	.hide .el-upload--picture-card {
		display: none;
	}

	.canvas-container {
		position: relative;
		margin-top: 1em;
		height: 500px;
		width: 500px;
		background-image: linear-gradient(45deg, lightgray 25%, transparent 25%, transparent 75%, lightgray 75%, lightgray),
			linear-gradient(45deg, lightgray 25%, transparent 25%, transparent 75%, lightgray 75%, lightgray);
		background-size: 40px 40px;
		background-position: 0 0, 20px 20px;
	}

	.color-temp {
		width: 1em;
		height: 1em;
		display: inline-block;
		border: 1px solid black;
	}

	.fixed-btn {
		position: fixed;
		bottom: 8em;
		right: 6em;
	}
</style>
